<template>
  <div>
    <el-card class="box-card" body-style="padding:0">
      <el-container>
        <el-aside
          width="260px"
          style="border-right: 1px solid #dcdfe6"
          class="chats"
        >
          <el-card class="chats-header"></el-card>
          <ul class="chats-cell">
            <Chats
              v-for="item in $store.state.SESSION_LIST"
              :key="item.sessionId"
              :session="item"
              @click="chatsWindow"
            >
            </Chats>
          </ul>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import Chats from "@/components/Chats";
// import ChatsFrame from "../../../components/ChatFrame";
export default {
  data() {
    return {};
  },
  created() {
    let sessionId = this.$route.query.sessionId;
    this.$router.push({
      path: "chatFrame",
      query: {
        sessionId: sessionId,
      },
    });
  },
  methods: {
    chatsWindow(session) {
      this.$router.push({
        path: "chatFrame",
        query: {
          sessionId: session.sessionId,
        },
      });
    },
  },
  components: {
    Chats,
    // ChatsFrame,
  },
};
</script>

<style  scoped>
.el-main {
  padding: 0;
}
.box-card {
  height: 618px;
}
.chats-header {
  height: 50px;
  width: 258px;
}
.chats-cell {
  background-color: #ebeef59e;
  width: 260px;
  height: 568px;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  overflow: auto;
}
/*滚动条样式*/
.chats-cell::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.chats-cell::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #e0e2e6;
  background: rgba(0, 0, 0, 0.2);
}
.chats-cell::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #fff;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>